
<template>
  <scroll-view class="message-wrapper" :scroll-y="true">
    <view v-if="messageExample.length == 0" class="message-list-no-data">
      <image class="message-list-no-data-image" :src="settings.logo">
    </view>
    <view v-if="messageExample.length > 0" class="message-list-data-content start">
      <view v-for="item in messageExample" :key="item" class="message-list-data-content">
        <view class="message-list-data-header">{{item.title}} </view>
        <view class="message-list-sub-title">{{item.content}}</view>
        <!-- <image class="message-list-data-header-image" src="http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg"> -->
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['settings'])
  },
  data() {
    return {
      messageExample: [
        {
          title: "审批",
          content: "陈晓晓的请假申请",
          time: "2020.01.15",
          image: "/static/celestial body_orange.png",
        },
        {
          title: "打卡",
          content: "09:16上班打卡·迟到",
          time: "2020.01.15",
          image: "/static/gongzuotai_baoxiao.png",
        },
        {
          title: "陈晓晓",
          content: "今日工作已完成",
          time: "2020.01.15",
          image: "/static/shouye.png",
        },
      ],
      isData: false,
    };
  },
};
</script>
<style lang="scss">
.message-wrapper {
  background-color: #fafbfb;
}
.message-list-no-data {
  display: block;
  text-align: center;
  align-items: center;
  .message-list-no-data-image {
    margin-top: 100px;
    width: 200px;
    height: 200px;
  }
  .message-list-no-data-text {
    font-size: 14px;
    color: $label;
    margin-top: 20px;
  }
}
.message-list-data-content {
  background-color: white;
  border-bottom: 0.5px #e8e8e8 solid;
  height: 78px;
  display: block;
  &.start {
    display: block;
    margin-top: 10px;
    padding-left: 0px;
    padding-top: 0px;
  }
  .message-list-data-header-image {
    margin-left: 22px;
    margin-top: 0px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
  }
  .message-list-data-header {
    padding-left: 80px;
    padding-top: 17px;
    height: 22px;
    color: #252525;
    font-size: 16px;
  }

  .message-list-sub-title {
    padding-left: 80px;
    padding-top: 8px;
    height: 18px;
    color: #9c9c9c;
    font-size: 14px;
  }
}
</style>
